<template>
<div class="container">
    <headers title="我的推荐码" :refresh="isRefresh" path="/home"></headers>
    <nav class="bar bar-tab">
        <a class="tab-item" v-link="{path: '/home', replace: true}">
            <span class="icon icon2 home-icon"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
            <span class="icon icon2 tuijianma-icon"></span>
            <span class="tab-label">推荐码</span>
        </a>
        <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
            <span class="icon icon2 ucenter-icon"></span>
            <span class="tab-label">个人中心</span>
        </a>
    </nav>
    <div class="content bg-color-white"  id="app-code">
        <div class="row no-gutter mar-top-0 bg-color-white">
            <div class="code">
                <img src="../assets/images/barcode/saomiao-top.png">
            </div>
            <div class="barcode col-100">推荐码：<span>{{userInfo.id}}</span></div>
            <div class="barcode-tip">下载APP 时，请在推荐码处输入。扫码下载软件，加入蚂蚁生财，轻松赚。</div>
        </div>
        <div class="barcode-img">
            <div class="code-top"></div>
            <div class="code-mid">
                <div class="code-left"></div>
                <div class="code-center">
                    <img :src="userInfo.qrCodeUrl">
                </div>
                <div class="code-right"></div>
            </div>
            <div class="code-bottom"></div>
        </div>
        <div class="code message">
            <img src="../assets/images/barcode/saomiao-wenzi.png">
        </div>
        <div class="barcode-tip pt0">下载注册期间遇到问题，请及时咨询我们公众号：蚂蚁生财。</div>
    </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getUserInfo()
  },
  data () {
    return {
      userInfo: [],
      isRefresh: false
    }
  },
  methods: {
    getUserInfo () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findCustomer', {
        params: {
          customerId: store('customerId') || 0
        }
      }).then((data) => {
        this.$set('userInfo', data.data)
      })
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
.bar:after{height:0};
.code{width:100%;height:320px;}
.code img{width:100%;height:100%}
.row.no-gutter .col-100{margin-left:31px;margin-bottom:10px}
.barcode span{font-size:26px;font-weight:600;}
.barcode-tip{width:100%;padding:15px 31px;font-size:14px;}
.barcode-tip.pt0{padding-top:0;}
.barcode-img{
    margin:0 auto;
    width:233px;
    height:211px;
    display:block;
    clear:both;
}
.code-top{
    clear:both;
    width:100%;
    height:15px;
    background:url(../assets/images/barcode/barcode-top.png);
    background-size:100% auto;
}
.code-mid{
    width:100%;
    height:184px;
    clear:both;
}
.code-bottom{
    clear:both;
    width:100%;
    height:17.5px;
    background:url(../assets/images/barcode/barcode-bottom.png);
    background-size:100% auto;
}
.code-left{
    float:left;
    width:25px;
    height:100%;
    background:url(../assets/images/barcode/barcode-left.png);
    background-size:100% auto;
}
.code-center{
    float:left;
    width:183px;
    height:100%;
}
.code-center img{
    width:100%;
    height:100%;
}
.code-right{
    float:left;
    width:25px;
    height:100%;
    background:url(../assets/images/barcode/barcode-right.png);
    background-size:100% auto;
}
.message{margin-top:1rem;}
</style>